<template>
  <div class="city">
    <div class="city-wrapper city-wrapper-hook" ref="cityWrapper" >
      <div class="scroller-hook" ref="cityScroller" >
        <div class="cities cities-hook" v-for="item in cityData" ref="cities">
          <div class="title">{{item.name}}</div>
          <ul>
            <li class='item' v-for="(item2,index) in item.cities"  >
              <span class="border-1px name" >{{item2.name}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="shortcut shortcut-hook" ref="shortcut">
         <ul>
           <li class="item" v-for="item in shortcutList"  @touchstart="start($event,item)" @touchmove="move($event,item)">
               {{item}}
           </li>
         </ul>
      </div>
    </div>
  </div>
</template>

<script>

  import BScroll from 'better-scroll'
export default {

    mounted () {

      this.$nextTick(()=>{
          this.cityWrapper =  this.$refs.cityWrapper;
          this.cityScroller = this.$refs.cityScroller;
          this.cities = this.$refs.cities;
          this.shortcut = this.$refs.shortcut
          this.initCity()
          this.initShortCut()
      })

    },
    data () {
        return {
          scroll : null,
          cityWrapper :null,
          cityScroller : null,
          shortcut : null,
          cityData :  [
            {
              name: "★热门城市",
              cities: [
                {
                  name: "北京市",
                  tags: "BEIJING,北京市",
                  cityid: 1
                },
                {
                  name: "上海市",
                  tags: "SHANGHAI,上海市",
                  cityid: 4
                },
                {
                  name: "深圳市",
                  tags: "SHENZHEN,深圳市",
                  cityid: 2
                },
                {
                  name: "广州市",
                  tags: "GUANGZHOU,广州市",
                  cityid: 3
                },
                {
                  name: "武汉市",
                  tags: "WUHAN,武汉市",
                  cityid: 6
                }
              ]
            },
            {
              name: "A",
              cities: [
                {
                  name: "鞍山市",
                  tags: "ANSHAN,鞍山市",
                  cityid: 64
                },
                {
                  name: "安庆市",
                  tags: "ANQING,安庆市",
                  cityid: 149
                },
                {
                  name: "安阳市",
                  tags: "ANYANG,安阳市",
                  cityid: 174
                },
                {
                  name: "阿拉善盟",
                  tags: "ALASHANMENG,阿拉善盟",
                  cityid: 202
                },
                {
                  name: "阿坝州",
                  tags: "ABAZHOU,阿坝州",
                  cityid: 290
                },
                {
                  name: "安顺市",
                  tags: "ANSHUN,安顺市",
                  cityid: 294
                },
                {
                  name: "阿里地区",
                  tags: "ALIDIQU,阿里地区",
                  cityid: 316
                },
                {
                  name: "安康市",
                  tags: "ANKANG,安康市",
                  cityid: 320
                },
                {
                  name: "阿克苏地区",
                  tags: "AKESUDIQU,阿克苏地区",
                  cityid: 348
                },
                {
                  name: "阿勒泰地区",
                  tags: "ALETAIDIQU,阿勒泰地区",
                  cityid: 355
                },
                {
                  name: "阿拉尔市",
                  tags: "ALAER,阿拉尔市",
                  cityid: 356
                }
              ]
            },
            {
              name: "B",
              cities: [
                {
                  name: "北京市",
                  tags: "BEIJING,北京市",
                  cityid: 1
                },
                {
                  name: "保定市",
                  tags: "BAODING,保定市",
                  cityid: 62
                },
                {
                  name: "包头市",
                  tags: "BAOTOU,包头市",
                  cityid: 63
                },
                {
                  name: "本溪市",
                  tags: "BENXI,本溪市",
                  cityid: 77
                },
                {
                  name: "蚌埠市",
                  tags: "BANGBU,蚌埠市",
                  cityid: 100
                },
                {
                  name: "北海市",
                  tags: "BEIHAI,北海市",
                  cityid: 161
                },
                {
                  name: "滨州市",
                  tags: "BINZHOU,滨州市",
                  cityid: 166
                },
                {
                  name: "宝鸡市",
                  tags: "BAOJI,宝鸡市",
                  cityid: 170
                },
                {
                  name: "亳州市",
                  tags: "BOZHOU,亳州市",
                  cityid: 189
                },
                {
                  name: "巴彦淖尔市",
                  tags: "BAYANNAOER,巴彦淖尔市",
                  cityid: 199
                },
                {
                  name: "白山市",
                  tags: "BAISHAN,白山市",
                  cityid: 208
                },
                {
                  name: "白城市",
                  tags: "BAICHENG,白城市",
                  cityid: 210
                },
                {
                  name: "百色市",
                  tags: "BAISE,百色市",
                  cityid: 263
                },
                {
                  name: "白沙黎族自治县",
                  tags: "BAISHALIZUZIZHIXIAN,白沙黎族自治县",
                  cityid: 278
                },
                {
                  name: "巴中市",
                  tags: "BAZHONG,巴中市",
                  cityid: 288
                },
                {
                  name: "毕节地区",
                  tags: "BIJIEDIQU,毕节地区",
                  cityid: 296
                },
                {
                  name: "保山市",
                  tags: "BAOSHAN,保山市",
                  cityid: 301
                },
                {
                  name: "白银市",
                  tags: "BAIYIN,白银市",
                  cityid: 323
                },
                {
                  name: "巴音郭楞州",
                  tags: "BAYINGUOLENGZHOU,巴音郭楞州",
                  cityid: 350
                },
                {
                  name: "博尔塔拉州",
                  tags: "BOERTALAZHOU,博尔塔拉州",
                  cityid: 352
                }
              ]
            },
            {
              name: "C",
              cities: [
                {
                  name: "成都市",
                  tags: "CHENGDU,成都市",
                  cityid: 17
                },
                {
                  name: "重庆市",
                  tags: "CHONGQING,重庆市",
                  cityid: 18
                },
                {
                  name: "长沙市",
                  tags: "CHANGSHA,长沙市",
                  cityid: 24
                },
                {
                  name: "长春市",
                  tags: "CHANGCHUN,长春市",
                  cityid: 25
                },
                {
                  name: "常州市",
                  tags: "CHANGZHOU,常州市",
                  cityid: 45
                },
                {
                  name: "沧州市",
                  tags: "CANGZHOU,沧州市",
                  cityid: 59
                },
                {
                  name: "承德市",
                  tags: "CHENGDE,承德市",
                  cityid: 72
                },
                {
                  name: "常德市",
                  tags: "CHANGDE,常德市",
                  cityid: 106
                },
                {
                  name: "郴州市",
                  tags: "CHENZHOU,郴州市",
                  cityid: 107
                },
                {
                  name: "长治市",
                  tags: "CHANGZHI,长治市",
                  cityid: 127
                },
                {
                  name: "滁州市",
                  tags: "CHUZHOU,滁州市",
                  cityid: 148
                },
                {
                  name: "池州市",
                  tags: "CHIZHOU,池州市",
                  cityid: 187
                },
                {
                  name: "赤峰市",
                  tags: "CHIFENG,赤峰市",
                  cityid: 196
                },
                {
                  name: "巢湖市",
                  tags: "CHAOHU,巢湖市",
                  cityid: 204
                },
                {
                  name: "朝阳市",
                  tags: "CHAOYANG,朝阳市",
                  cityid: 205
                },
                {
                  name: "潮州市",
                  tags: "CHAOZHOU,潮州市",
                  cityid: 257
                },
                {
                  name: "崇左市",
                  tags: "CHONGZUO,崇左市",
                  cityid: 267
                },
                {
                  name: "澄迈县",
                  tags: "CHENGMAIXIAN,澄迈县",
                  cityid: 274
                },
                {
                  name: "楚雄州",
                  tags: "CHUXIONGZHOU,楚雄州",
                  cityid: 308
                },
                {
                  name: "昌都地区",
                  tags: "CHANGDUDIQU,昌都地区",
                  cityid: 313
                },
                {
                  name: "昌吉州",
                  tags: "CHANGJIZHOU,昌吉州",
                  cityid: 351
                }
              ]
            },
            {
              name: "D",
              cities: [
                {
                  name: "大连市",
                  tags: "DALIAN,大连市",
                  cityid: 14
                },
                {
                  name: "东莞市",
                  tags: "DONGWAN,东莞市",
                  cityid: 21
                },
                {
                  name: "大庆市",
                  tags: "DAQING,大庆市",
                  cityid: 48
                },
                {
                  name: "东营市",
                  tags: "DONGYING,东营市",
                  cityid: 73
                },
                {
                  name: "德州市",
                  tags: "DEZHOU,德州市",
                  cityid: 120
                },
                {
                  name: "大同市",
                  tags: "DATONG,大同市",
                  cityid: 125
                },
                {
                  name: "大理州",
                  tags: "DALIZHOU,大理州",
                  cityid: 136
                },
                {
                  name: "丹东市",
                  tags: "DANDONG,丹东市",
                  cityid: 163
                },
                {
                  name: "德阳市",
                  tags: "DEYANG,德阳市",
                  cityid: 173
                },
                {
                  name: "大兴安岭地区",
                  tags: "DAXINGANLINGDIQU,大兴安岭地区",
                  cityid: 218
                },
                {
                  name: "儋州市",
                  tags: "DANZHOU,儋州市",
                  cityid: 270
                },
                {
                  name: "东方市",
                  tags: "DONGFANG,东方市",
                  cityid: 273
                },
                {
                  name: "定安县",
                  tags: "DINGANXIAN,定安县",
                  cityid: 275
                },
                {
                  name: "达州市",
                  tags: "DAZHOU,达州市",
                  cityid: 285
                },
                {
                  name: "德宏州",
                  tags: "DEHONGZHOU,德宏州",
                  cityid: 309
                },
                {
                  name: "迪庆州",
                  tags: "DIQINGZHOU,迪庆州",
                  cityid: 311
                },
                {
                  name: "定西市",
                  tags: "DINGXI,定西市",
                  cityid: 330
                }
              ]
            },
            {
              name: "E",
              cities: [
                {
                  name: "鄂尔多斯市",
                  tags: "EERDUOSI,鄂尔多斯市",
                  cityid: 43
                },
                {
                  name: "鄂州市",
                  tags: "EZHOU,鄂州市",
                  cityid: 230
                },
                {
                  name: "恩施州",
                  tags: "ENSHIZHOU,恩施州",
                  cityid: 235
                }
              ]
            },
            {
              name: "F",
              cities: [
                {
                  name: "福州市",
                  tags: "FUZHOU,福州市",
                  cityid: 34
                },
                {
                  name: "佛山市",
                  tags: "FOSHAN,佛山市",
                  cityid: 36
                },
                {
                  name: "抚顺市",
                  tags: "FUSHUN,抚顺市",
                  cityid: 66
                },
                {
                  name: "阜新市",
                  tags: "FUXIN,阜新市",
                  cityid: 164
                },
                {
                  name: "阜阳市",
                  tags: "FUYANG,阜阳市",
                  cityid: 188
                },
                {
                  name: "抚州市",
                  tags: "FUZHOU,抚州市",
                  cityid: 223
                },
                {
                  name: "防城港市",
                  tags: "FANGCHENGGANG,防城港市",
                  cityid: 260
                }
              ]
            },
            {
              name: "G",
              cities: [
                {
                  name: "广州市",
                  tags: "GUANGZHOU,广州市",
                  cityid: 3
                },
                {
                  name: "贵阳市",
                  tags: "GUIYANG,贵阳市",
                  cityid: 82
                },
                {
                  name: "赣州市",
                  tags: "GANZHOU,赣州市",
                  cityid: 102
                },
                {
                  name: "桂林市",
                  tags: "GUILIN,桂林市",
                  cityid: 135
                },
                {
                  name: "贵港市",
                  tags: "GUIGANG,贵港市",
                  cityid: 262
                },
                {
                  name: "广元市",
                  tags: "GUANGYUAN,广元市",
                  cityid: 280
                },
                {
                  name: "广安市",
                  tags: "GUANGAN,广安市",
                  cityid: 284
                },
                {
                  name: "甘孜州",
                  tags: "GANZIZHOU,甘孜州",
                  cityid: 291
                },
                {
                  name: "甘南州",
                  tags: "GANNANZHOU,甘南州",
                  cityid: 333
                },
                {
                  name: "固原市",
                  tags: "GUYUAN,固原市",
                  cityid: 336
                },
                {
                  name: "果洛州",
                  tags: "GUOLUOZHOU,果洛州",
                  cityid: 342
                }
              ]
            },
            {
              name: "H",
              cities: [
                {
                  name: "杭州市",
                  tags: "HANGZHOU,杭州市",
                  cityid: 5
                },
                {
                  name: "合肥市",
                  tags: "HEFEI,合肥市",
                  cityid: 15
                },
                {
                  name: "哈尔滨市",
                  tags: "HAERBIN,哈尔滨市",
                  cityid: 16
                },
                {
                  name: "呼和浩特市",
                  tags: "HUHEHAOTE,呼和浩特市",
                  cityid: 41
                },
                {
                  name: "邯郸市",
                  tags: "HANDAN,邯郸市",
                  cityid: 60
                },
                {
                  name: "葫芦岛市",
                  tags: "HULUDAO,葫芦岛市",
                  cityid: 70
                },
                {
                  name: "衡水市",
                  tags: "HENGSHUI,衡水市",
                  cityid: 80
                },
                {
                  name: "海口市",
                  tags: "HAIKOU,海口市",
                  cityid: 83
                },
                {
                  name: "湖州市",
                  tags: "HUZHOU,湖州市",
                  cityid: 90
                },
                {
                  name: "淮安市",
                  tags: "HUAIAN,淮安市",
                  cityid: 97
                },
                {
                  name: "衡阳市",
                  tags: "HENGYANG,衡阳市",
                  cityid: 105
                },
                {
                  name: "汉中市",
                  tags: "HANZHONG,汉中市",
                  cityid: 115
                },
                {
                  name: "菏泽市",
                  tags: "HEZE,菏泽市",
                  cityid: 124
                },
                {
                  name: "惠州市",
                  tags: "HUIZHOU,惠州市",
                  cityid: 133
                },
                {
                  name: "黄山市",
                  tags: "HUANGSHAN,黄山市",
                  cityid: 141
                },
                {
                  name: "淮南市",
                  tags: "HUAINAN,淮南市",
                  cityid: 150
                },
                {
                  name: "淮北市",
                  tags: "HUAIBEI,淮北市",
                  cityid: 183
                },
                {
                  name: "呼伦贝尔市",
                  tags: "HULUNBEIER,呼伦贝尔市",
                  cityid: 198
                },
                {
                  name: "鹤岗市",
                  tags: "HEGANG,鹤岗市",
                  cityid: 212
                },
                {
                  name: "黑河市",
                  tags: "HEIHE,黑河市",
                  cityid: 217
                },
                {
                  name: "黄石市",
                  tags: "HUANGSHI,黄石市",
                  cityid: 227
                },
                {
                  name: "黄冈市",
                  tags: "HUANGGANG,黄冈市",
                  cityid: 232
                },
                {
                  name: "怀化市",
                  tags: "HUAIHUA,怀化市",
                  cityid: 244
                },
                {
                  name: "鹤壁市",
                  tags: "HEBI,鹤壁市",
                  cityid: 247
                },
                {
                  name: "河源市",
                  tags: "HEYUAN,河源市",
                  cityid: 254
                },
                {
                  name: "贺州市",
                  tags: "HEZHOU,贺州市",
                  cityid: 264
                },
                {
                  name: "河池市",
                  tags: "HECHI,河池市",
                  cityid: 265
                },
                {
                  name: "红河州",
                  tags: "HONGHEZHOU,红河州",
                  cityid: 306
                },
                {
                  name: "海东地区",
                  tags: "HAIDONGDIQU,海东地区",
                  cityid: 338
                },
                {
                  name: "海北州",
                  tags: "HAIBEIZHOU,海北州",
                  cityid: 339
                },
                {
                  name: "黄南州",
                  tags: "HUANGNANZHOU,黄南州",
                  cityid: 340
                },
                {
                  name: "海南州",
                  tags: "HAINANZHOU,海南州",
                  cityid: 341
                },
                {
                  name: "海西州",
                  tags: "HAIXIZHOU,海西州",
                  cityid: 344
                },
                {
                  name: "哈密地区",
                  tags: "HAMIDIQU,哈密地区",
                  cityid: 346
                },
                {
                  name: "和田地区",
                  tags: "HETIANDIQU,和田地区",
                  cityid: 347
                }
              ]
            },
            {
              name: "J",
              cities: [
                {
                  name: "济南市",
                  tags: "JINAN,济南市",
                  cityid: 12
                },
                {
                  name: "锦州市",
                  tags: "JINZHOU,锦州市",
                  cityid: 68
                },
                {
                  name: "晋中市",
                  tags: "JINZHONG,晋中市",
                  cityid: 71
                },
                {
                  name: "吉林市",
                  tags: "JILIN,吉林市",
                  cityid: 74
                },
                {
                  name: "济宁市",
                  tags: "JINING,济宁市",
                  cityid: 79
                },
                {
                  name: "金华市",
                  tags: "JINHUA,金华市",
                  cityid: 86
                },
                {
                  name: "嘉兴市",
                  tags: "JIAXING,嘉兴市",
                  cityid: 88
                },
                {
                  name: "九江市",
                  tags: "JIUJIANG,九江市",
                  cityid: 101
                },
                {
                  name: "荆州市",
                  tags: "JINGZHOU,荆州市",
                  cityid: 109
                },
                {
                  name: "景德镇市",
                  tags: "JINGDEZHEN,景德镇市",
                  cityid: 151
                },
                {
                  name: "江门市",
                  tags: "JIANGMEN,江门市",
                  cityid: 153
                },
                {
                  name: "揭阳市",
                  tags: "JIEYANG,揭阳市",
                  cityid: 154
                },
                {
                  name: "焦作市",
                  tags: "JIAOZUO,焦作市",
                  cityid: 175
                },
                {
                  name: "晋城市",
                  tags: "JINCHENG,晋城市",
                  cityid: 190
                },
                {
                  name: "鸡西市",
                  tags: "JIXI,鸡西市",
                  cityid: 211
                },
                {
                  name: "佳木斯市",
                  tags: "JIAMUSI,佳木斯市",
                  cityid: 215
                },
                {
                  name: "吉安市",
                  tags: "JIAN,吉安市",
                  cityid: 221
                },
                {
                  name: "荆门市",
                  tags: "JINGMEN,荆门市",
                  cityid: 229
                },
                {
                  name: "济源市",
                  tags: "JIYUAN,济源市",
                  cityid: 252
                },
                {
                  name: "金昌市",
                  tags: "JINCHANG,金昌市",
                  cityid: 322
                },
                {
                  name: "嘉峪关市",
                  tags: "JIAYUGUAN,嘉峪关市",
                  cityid: 324
                },
                {
                  name: "酒泉市",
                  tags: "JIUQUAN,酒泉市",
                  cityid: 328
                }
              ]
            },
            {
              name: "K",
              cities: [
                {
                  name: "昆明市",
                  tags: "KUNMING,昆明市",
                  cityid: 19
                },
                {
                  name: "开封市",
                  tags: "KAIFENG,开封市",
                  cityid: 110
                },
                {
                  name: "喀什地区",
                  tags: "KASHIDIQU,喀什地区",
                  cityid: 179
                },
                {
                  name: "克拉玛依市",
                  tags: "KELAMAYI,克拉玛依市",
                  cityid: 180
                },
                {
                  name: "克孜勒苏柯州",
                  tags: "KEZILESUKEZHOU,克孜勒苏柯州",
                  cityid: 349
                }
              ]
            },
            {
              name: "L",
              cities: [
                {
                  name: "洛阳市",
                  tags: "LUOYANG,洛阳市",
                  cityid: 27
                },
                {
                  name: "兰州市",
                  tags: "LANZHOU,兰州市",
                  cityid: 30
                },
                {
                  name: "廊坊市",
                  tags: "LANGFANG,廊坊市",
                  cityid: 46
                },
                {
                  name: "临沂市",
                  tags: "LINYI,临沂市",
                  cityid: 58
                },
                {
                  name: "辽阳市",
                  tags: "LIAOYANG,辽阳市",
                  cityid: 75
                },
                {
                  name: "连云港市",
                  tags: "LIANYUNGANG,连云港市",
                  cityid: 96
                },
                {
                  name: "泸州市",
                  tags: "LUZHOU,泸州市",
                  cityid: 117
                },
                {
                  name: "莱芜市",
                  tags: "LAIWU,莱芜市",
                  cityid: 122
                },
                {
                  name: "聊城市",
                  tags: "LIAOCHENG,聊城市",
                  cityid: 123
                },
                {
                  name: "柳州市",
                  tags: "LIUZHOU,柳州市",
                  cityid: 134
                },
                {
                  name: "丽江市",
                  tags: "LIJIANG,丽江市",
                  cityid: 137
                },
                {
                  name: "丽水市",
                  tags: "LISHUI,丽水市",
                  cityid: 139
                },
                {
                  name: "拉萨市",
                  tags: "LASA,拉萨市",
                  cityid: 178
                },
                {
                  name: "六安市",
                  tags: "LIUAN,六安市",
                  cityid: 186
                },
                {
                  name: "临汾市",
                  tags: "LINFEN,临汾市",
                  cityid: 193
                },
                {
                  name: "吕梁市",
                  tags: "LVLIANG,吕梁市",
                  cityid: 194
                },
                {
                  name: "辽源市",
                  tags: "LIAOYUAN,辽源市",
                  cityid: 206
                },
                {
                  name: "龙岩市",
                  tags: "LONGYAN,龙岩市",
                  cityid: 226
                },
                {
                  name: "娄底市",
                  tags: "LOUDI,娄底市",
                  cityid: 245
                },
                {
                  name: "漯河市",
                  tags: "LUOHE,漯河市",
                  cityid: 248
                },
                {
                  name: "来宾市",
                  tags: "LAIBIN,来宾市",
                  cityid: 266
                },
                {
                  name: "临高县",
                  tags: "LINGAOXIAN,临高县",
                  cityid: 277
                },
                {
                  name: "乐山市",
                  tags: "LESHAN,乐山市",
                  cityid: 283
                },
                {
                  name: "凉山州",
                  tags: "LIANGSHANZHOU,凉山州",
                  cityid: 292
                },
                {
                  name: "六盘水市",
                  tags: "LIUPANSHUI,六盘水市",
                  cityid: 293
                },
                {
                  name: "临沧市",
                  tags: "LINCANG,临沧市",
                  cityid: 304
                },
                {
                  name: "林芝地区",
                  tags: "LINZHIDIQU,林芝地区",
                  cityid: 317
                },
                {
                  name: "陇南市",
                  tags: "LONGNAN,陇南市",
                  cityid: 331
                },
                {
                  name: "临夏州",
                  tags: "LINXIAZHOU,临夏州",
                  cityid: 332
                }
              ]
            },
            {
              name: "M",
              cities: [
                {
                  name: "绵阳市",
                  tags: "MIANYANG,绵阳市",
                  cityid: 50
                },
                {
                  name: "马鞍山市",
                  tags: "MAANSHAN,马鞍山市",
                  cityid: 99
                },
                {
                  name: "牡丹江市",
                  tags: "MUDANJIANG,牡丹江市",
                  cityid: 129
                },
                {
                  name: "茂名市",
                  tags: "MAOMING,茂名市",
                  cityid: 155
                },
                {
                  name: "梅州市",
                  tags: "MEIZHOU,梅州市",
                  cityid: 156
                },
                {
                  name: "眉山市",
                  tags: "MEISHAN,眉山市",
                  cityid: 286
                }
              ]
            },
            {
              name: "N",
              cities: [
                {
                  name: "南京市",
                  tags: "NANJING,南京市",
                  cityid: 11
                },
                {
                  name: "宁波市",
                  tags: "NINGBO,宁波市",
                  cityid: 20
                },
                {
                  name: "南宁市",
                  tags: "NANNING,南宁市",
                  cityid: 33
                },
                {
                  name: "南昌市",
                  tags: "NANCHANG,南昌市",
                  cityid: 38
                },
                {
                  name: "南充市",
                  tags: "NANCHONG,南充市",
                  cityid: 53
                },
                {
                  name: "南通市",
                  tags: "NANTONG,南通市",
                  cityid: 92
                },
                {
                  name: "南阳市",
                  tags: "NANYANG,南阳市",
                  cityid: 113
                },
                {
                  name: "宁德市",
                  tags: "NINGDE,宁德市",
                  cityid: 144
                },
                {
                  name: "南平市",
                  tags: "NANPING,南平市",
                  cityid: 145
                },
                {
                  name: "内江市",
                  tags: "NEIJIANG,内江市",
                  cityid: 282
                },
                {
                  name: "怒江州",
                  tags: "NUJIANGZHOU,怒江州",
                  cityid: 310
                },
                {
                  name: "那曲地区",
                  tags: "NAQUDIQU,那曲地区",
                  cityid: 312
                }
              ]
            },
            {
              name: "P",
              cities: [
                {
                  name: "平顶山市",
                  tags: "PINGDINGSHAN,平顶山市",
                  cityid: 103
                },
                {
                  name: "攀枝花市",
                  tags: "PANZHIHUA,攀枝花市",
                  cityid: 119
                },
                {
                  name: "莆田市",
                  tags: "PUTIAN,莆田市",
                  cityid: 143
                },
                {
                  name: "盘锦市",
                  tags: "PANJIN,盘锦市",
                  cityid: 165
                },
                {
                  name: "濮阳市",
                  tags: "PUYANG,濮阳市",
                  cityid: 176
                },
                {
                  name: "萍乡市",
                  tags: "PINGXIANG,萍乡市",
                  cityid: 219
                },
                {
                  name: "普洱市",
                  tags: "PUER,普洱市",
                  cityid: 303
                },
                {
                  name: "平凉市",
                  tags: "PINGLIANG,平凉市",
                  cityid: 327
                }
              ]
            },
            {
              name: "Q",
              cities: [
                {
                  name: "青岛市",
                  tags: "QINGDAO,青岛市",
                  cityid: 13
                },
                {
                  name: "泉州市",
                  tags: "QUANZHOU,泉州市",
                  cityid: 35
                },
                {
                  name: "秦皇岛市",
                  tags: "QINHUANGDAO,秦皇岛市",
                  cityid: 61
                },
                {
                  name: "齐齐哈尔市",
                  tags: "QIQIHAER,齐齐哈尔市",
                  cityid: 65
                },
                {
                  name: "曲靖市",
                  tags: "QUJING,曲靖市",
                  cityid: 138
                },
                {
                  name: "衢州市",
                  tags: "QUZHOU,衢州市",
                  cityid: 140
                },
                {
                  name: "清远市",
                  tags: "QINGYUAN,清远市",
                  cityid: 157
                },
                {
                  name: "七台河市",
                  tags: "QITAIHE,七台河市",
                  cityid: 216
                },
                {
                  name: "潜江市",
                  tags: "QIANJIANG,潜江市",
                  cityid: 238
                },
                {
                  name: "钦州市",
                  tags: "QINZHOU,钦州市",
                  cityid: 261
                },
                {
                  name: "琼海市",
                  tags: "QIONGHAI,琼海市",
                  cityid: 269
                },
                {
                  name: "黔西南州",
                  tags: "QIANXINANZHOU,黔西南州",
                  cityid: 297
                },
                {
                  name: "黔东南州",
                  tags: "QIANDONGNANZHOU,黔东南州",
                  cityid: 298
                },
                {
                  name: "黔南州",
                  tags: "QIANNANZHOU,黔南州",
                  cityid: 299
                },
                {
                  name: "庆阳市",
                  tags: "QINGYANG,庆阳市",
                  cityid: 329
                }
              ]
            },
            {
              name: "R",
              cities: [
                {
                  name: "日照市",
                  tags: "RIZHAO,日照市",
                  cityid: 167
                },
                {
                  name: "日喀则地区",
                  tags: "RIKAZEDIQU,日喀则地区",
                  cityid: 315
                }
              ]
            },
            {
              name: "S",
              cities: [
                {
                  name: "深圳市",
                  tags: "SHENZHEN,深圳市",
                  cityid: 2
                },
                {
                  name: "上海市",
                  tags: "SHANGHAI,上海市",
                  cityid: 4
                },
                {
                  name: "沈阳市",
                  tags: "SHENYANG,沈阳市",
                  cityid: 8
                },
                {
                  name: "石家庄市",
                  tags: "SHIJIAZHUANG,石家庄市",
                  cityid: 22
                },
                {
                  name: "苏州市",
                  tags: "SUZHOU,苏州市",
                  cityid: 23
                },
                {
                  name: "三亚市",
                  tags: "SANYA,三亚市",
                  cityid: 37
                },
                {
                  name: "绍兴市",
                  tags: "SHAOXING,绍兴市",
                  cityid: 89
                },
                {
                  name: "绥化市",
                  tags: "SUIHUA,绥化市",
                  cityid: 128
                },
                {
                  name: "四平市",
                  tags: "SIPING,四平市",
                  cityid: 130
                },
                {
                  name: "宿迁市",
                  tags: "SUQIAN,宿迁市",
                  cityid: 147
                },
                {
                  name: "汕头市",
                  tags: "SHANTOU,汕头市",
                  cityid: 158
                },
                {
                  name: "商丘市",
                  tags: "SHANGQIU,商丘市",
                  cityid: 177
                },
                {
                  name: "石河子市",
                  tags: "SHIHEZI,石河子市",
                  cityid: 181
                },
                {
                  name: "宿州市",
                  tags: "SUZHOU,宿州市",
                  cityid: 185
                },
                {
                  name: "朔州市",
                  tags: "SHUOZHOU,朔州市",
                  cityid: 191
                },
                {
                  name: "松原市",
                  tags: "SONGYUAN,松原市",
                  cityid: 209
                },
                {
                  name: "双鸭山市",
                  tags: "SHUANGYASHAN,双鸭山市",
                  cityid: 213
                },
                {
                  name: "上饶市",
                  tags: "SHANGRAO,上饶市",
                  cityid: 224
                },
                {
                  name: "三明市",
                  tags: "SANMING,三明市",
                  cityid: 225
                },
                {
                  name: "十堰市",
                  tags: "SHIYAN,十堰市",
                  cityid: 228
                },
                {
                  name: "随州市",
                  tags: "SUIZHOU,随州市",
                  cityid: 234
                },
                {
                  name: "神农架林区",
                  tags: "SHENNONGJIALINQU,神农架林区",
                  cityid: 239
                },
                {
                  name: "邵阳市",
                  tags: "SHAOYANG,邵阳市",
                  cityid: 240
                },
                {
                  name: "三门峡市",
                  tags: "SANMENXIA,三门峡市",
                  cityid: 249
                },
                {
                  name: "韶关市",
                  tags: "SHAOGUAN,韶关市",
                  cityid: 253
                },
                {
                  name: "汕尾市",
                  tags: "SHANWEI,汕尾市",
                  cityid: 255
                },
                {
                  name: "遂宁市",
                  tags: "SUINING,遂宁市",
                  cityid: 281
                },
                {
                  name: "山南地区",
                  tags: "SHANNANDIQU,山南地区",
                  cityid: 314
                },
                {
                  name: "商洛市",
                  tags: "SHANGLUO,商洛市",
                  cityid: 321
                },
                {
                  name: "石嘴山市",
                  tags: "SHIZUISHAN,石嘴山市",
                  cityid: 334
                }
              ]
            },
            {
              name: "T",
              cities: [
                {
                  name: "天津市",
                  tags: "TIANJIN,天津市",
                  cityid: 7
                },
                {
                  name: "太原市",
                  tags: "TAIYUAN,太原市",
                  cityid: 26
                },
                {
                  name: "唐山市",
                  tags: "TANGSHAN,唐山市",
                  cityid: 40
                },
                {
                  name: "铁岭市",
                  tags: "TIELING,铁岭市",
                  cityid: 69
                },
                {
                  name: "台州市",
                  tags: "TAIZHOU,台州市",
                  cityid: 87
                },
                {
                  name: "泰州市",
                  tags: "TAIZHOU,泰州市",
                  cityid: 95
                },
                {
                  name: "泰安市",
                  tags: "TAIAN,泰安市",
                  cityid: 121
                },
                {
                  name: "天水市",
                  tags: "TIANSHUI,天水市",
                  cityid: 169
                },
                {
                  name: "铜陵市",
                  tags: "TONGLING,铜陵市",
                  cityid: 184
                },
                {
                  name: "通辽市",
                  tags: "TONGLIAO,通辽市",
                  cityid: 197
                },
                {
                  name: "通化市",
                  tags: "TONGHUA,通化市",
                  cityid: 207
                },
                {
                  name: "天门市",
                  tags: "TIANMEN,天门市",
                  cityid: 237
                },
                {
                  name: "屯昌县",
                  tags: "TUNCHANGXIAN,屯昌县",
                  cityid: 276
                },
                {
                  name: "铜仁地区",
                  tags: "TONGRENDIQU,铜仁地区",
                  cityid: 295
                },
                {
                  name: "铜川市",
                  tags: "TONGCHUAN,铜川市",
                  cityid: 318
                },
                {
                  name: "吐鲁番地区",
                  tags: "TULUFANDIQU,吐鲁番地区",
                  cityid: 345
                },
                {
                  name: "塔城地区",
                  tags: "TACHENGDIQU,塔城地区",
                  cityid: 354
                }
              ]
            },
            {
              name: "W",
              cities: [
                {
                  name: "武汉市",
                  tags: "WUHAN,武汉市",
                  cityid: 6
                },
                {
                  name: "威海市",
                  tags: "WEIHAI,威海市",
                  cityid: 42
                },
                {
                  name: "无锡市",
                  tags: "WUXI,无锡市",
                  cityid: 47
                },
                {
                  name: "乌鲁木齐市",
                  tags: "WULUMUQI,乌鲁木齐市",
                  cityid: 52
                },
                {
                  name: "潍坊市",
                  tags: "WEIFANG,潍坊市",
                  cityid: 81
                },
                {
                  name: "温州市",
                  tags: "WENZHOU,温州市",
                  cityid: 85
                },
                {
                  name: "芜湖市",
                  tags: "WUHU,芜湖市",
                  cityid: 98
                },
                {
                  name: "乌海市",
                  tags: "WUHAI,乌海市",
                  cityid: 195
                },
                {
                  name: "乌兰察布市",
                  tags: "WULANCHABU,乌兰察布市",
                  cityid: 200
                },
                {
                  name: "梧州市",
                  tags: "WUZHOU,梧州市",
                  cityid: 259
                },
                {
                  name: "五指山市",
                  tags: "WUZHISHAN,五指山市",
                  cityid: 268
                },
                {
                  name: "文昌市",
                  tags: "WENCHANG,文昌市",
                  cityid: 271
                },
                {
                  name: "万宁市",
                  tags: "WANNING,万宁市",
                  cityid: 272
                },
                {
                  name: "文山州",
                  tags: "WENSHANZHOU,文山州",
                  cityid: 305
                },
                {
                  name: "渭南市",
                  tags: "WEINAN,渭南市",
                  cityid: 319
                },
                {
                  name: "武威市",
                  tags: "WUWEI,武威市",
                  cityid: 325
                },
                {
                  name: "吴忠市",
                  tags: "WUZHONG,吴忠市",
                  cityid: 335
                }
              ]
            },
            {
              name: "X",
              cities: [
                {
                  name: "西安市",
                  tags: "XIAN,西安市",
                  cityid: 10
                },
                {
                  name: "西宁市",
                  tags: "XINING,西宁市",
                  cityid: 28
                },
                {
                  name: "厦门市",
                  tags: "XIAMEN,厦门市",
                  cityid: 32
                },
                {
                  name: "徐州市",
                  tags: "XUZHOU,徐州市",
                  cityid: 39
                },
                {
                  name: "湘潭市",
                  tags: "XIANGTAN,湘潭市",
                  cityid: 55
                },
                {
                  name: "邢台市",
                  tags: "XINGTAI,邢台市",
                  cityid: 67
                },
                {
                  name: "襄阳市",
                  tags: "XIANGYANG,襄阳市",
                  cityid: 108
                },
                {
                  name: "新乡市",
                  tags: "XINXIANG,新乡市",
                  cityid: 111
                },
                {
                  name: "许昌市",
                  tags: "XUCHANG,许昌市",
                  cityid: 112
                },
                {
                  name: "咸阳市",
                  tags: "XIANYANG,咸阳市",
                  cityid: 116
                },
                {
                  name: "新余市",
                  tags: "XINYU,新余市",
                  cityid: 152
                },
                {
                  name: "宣城市",
                  tags: "XUANCHENG,宣城市",
                  cityid: 182
                },
                {
                  name: "忻州市",
                  tags: "XINZHOU,忻州市",
                  cityid: 192
                },
                {
                  name: "锡林郭勒盟",
                  tags: "XILINGUOLEMENG,锡林郭勒盟",
                  cityid: 201
                },
                {
                  name: "兴安盟",
                  tags: "XINGANMENG,兴安盟",
                  cityid: 203
                },
                {
                  name: "孝感市",
                  tags: "XIAOGAN,孝感市",
                  cityid: 231
                },
                {
                  name: "咸宁市",
                  tags: "XIANNING,咸宁市",
                  cityid: 233
                },
                {
                  name: "仙桃市",
                  tags: "XIANTAO,仙桃市",
                  cityid: 236
                },
                {
                  name: "湘西州",
                  tags: "XIANGXIZHOU,湘西州",
                  cityid: 246
                },
                {
                  name: "信阳市",
                  tags: "XINYANG,信阳市",
                  cityid: 250
                },
                {
                  name: "西双版纳州",
                  tags: "XISHUANGBANNAZHOU,西双版纳州",
                  cityid: 307
                }
              ]
            },
            {
              name: "Y",
              cities: [
                {
                  name: "烟台市",
                  tags: "YANTAI,烟台市",
                  cityid: 29
                },
                {
                  name: "银川市",
                  tags: "YINCHUAN,银川市",
                  cityid: 49
                },
                {
                  name: "宜昌市",
                  tags: "YICHANG,宜昌市",
                  cityid: 51
                },
                {
                  name: "岳阳市",
                  tags: "YUEYANG,岳阳市",
                  cityid: 56
                },
                {
                  name: "营口市",
                  tags: "YINGKOU,营口市",
                  cityid: 76
                },
                {
                  name: "扬州市",
                  tags: "YANGZHOU,扬州市",
                  cityid: 91
                },
                {
                  name: "盐城市",
                  tags: "YANCHENG,盐城市",
                  cityid: 94
                },
                {
                  name: "运城市",
                  tags: "YUNCHENG,运城市",
                  cityid: 104
                },
                {
                  name: "宜宾市",
                  tags: "YIBIN,宜宾市",
                  cityid: 118
                },
                {
                  name: "阳泉市",
                  tags: "YANGQUAN,阳泉市",
                  cityid: 126
                },
                {
                  name: "延吉市",
                  tags: "YANJI,延吉市",
                  cityid: 131
                },
                {
                  name: "玉林市",
                  tags: "YULIN,玉林市",
                  cityid: 162
                },
                {
                  name: "延安市",
                  tags: "YANAN,延安市",
                  cityid: 171
                },
                {
                  name: "榆林市",
                  tags: "YULIN,榆林市",
                  cityid: 172
                },
                {
                  name: "伊春市",
                  tags: "YICHUN,伊春市",
                  cityid: 214
                },
                {
                  name: "鹰潭市",
                  tags: "YINGTAN,鹰潭市",
                  cityid: 220
                },
                {
                  name: "宜春市",
                  tags: "YICHUN,宜春市",
                  cityid: 222
                },
                {
                  name: "益阳市",
                  tags: "YIYANG,益阳市",
                  cityid: 242
                },
                {
                  name: "永州市",
                  tags: "YONGZHOU,永州市",
                  cityid: 243
                },
                {
                  name: "阳江市",
                  tags: "YANGJIANG,阳江市",
                  cityid: 256
                },
                {
                  name: "云浮市",
                  tags: "YUNFU,云浮市",
                  cityid: 258
                },
                {
                  name: "雅安市",
                  tags: "YAAN,雅安市",
                  cityid: 287
                },
                {
                  name: "玉溪市",
                  tags: "YUXI,玉溪市",
                  cityid: 300
                },
                {
                  name: "玉树州",
                  tags: "YUSHUZHOU,玉树州",
                  cityid: 343
                },
                {
                  name: "伊犁州",
                  tags: "YILIZHOU,伊犁州",
                  cityid: 353
                }
              ]
            },
            {
              name: "Z",
              cities: [
                {
                  name: "郑州市",
                  tags: "ZHENGZHOU,郑州市",
                  cityid: 9
                },
                {
                  name: "遵义市",
                  tags: "ZUNYI,遵义市",
                  cityid: 44
                },
                {
                  name: "株洲市",
                  tags: "ZHUZHOU,株洲市",
                  cityid: 54
                },
                {
                  name: "淄博市",
                  tags: "ZIBO,淄博市",
                  cityid: 57
                },
                {
                  name: "张家口市",
                  tags: "ZHANGJIAKOU,张家口市",
                  cityid: 78
                },
                {
                  name: "珠海市",
                  tags: "ZHUHAI,珠海市",
                  cityid: 84
                },
                {
                  name: "镇江市",
                  tags: "ZHENJIANG,镇江市",
                  cityid: 93
                },
                {
                  name: "周口市",
                  tags: "ZHOUKOU,周口市",
                  cityid: 114
                },
                {
                  name: "中山市",
                  tags: "ZHONGSHAN,中山市",
                  cityid: 132
                },
                {
                  name: "漳州市",
                  tags: "ZHANGZHOU,漳州市",
                  cityid: 142
                },
                {
                  name: "舟山市",
                  tags: "ZHOUSHAN,舟山市",
                  cityid: 146
                },
                {
                  name: "湛江市",
                  tags: "ZHANJIANG,湛江市",
                  cityid: 159
                },
                {
                  name: "肇庆市",
                  tags: "ZHAOQING,肇庆市",
                  cityid: 160
                },
                {
                  name: "枣庄市",
                  tags: "ZAOZHUANG,枣庄市",
                  cityid: 168
                },
                {
                  name: "张家界市",
                  tags: "ZHANGJIAJIE,张家界市",
                  cityid: 241
                },
                {
                  name: "驻马店市",
                  tags: "ZHUMADIAN,驻马店市",
                  cityid: 251
                },
                {
                  name: "自贡市",
                  tags: "ZIGONG,自贡市",
                  cityid: 279
                },
                {
                  name: "资阳市",
                  tags: "ZIYANG,资阳市",
                  cityid: 289
                },
                {
                  name: "昭通市",
                  tags: "ZHAOTONG,昭通市",
                  cityid: 302
                },
                {
                  name: "张掖市",
                  tags: "ZHANGYE,张掖市",
                  cityid: 326
                },
                {
                  name: "中卫市",
                  tags: "ZHONGWEI,中卫市",
                  cityid: 337
                }
              ]
            }
          ],
          shortcutList : [],
          anchorMap : {},
          touch : {},
          firstTouch : ""
        }
    },
    methods : {
      start (even,item) {
           this.firstTouch = even.touches[0]
           this.touch.y1 = this.firstTouch.pageY;
           this.touch.anchor = item;
           this.scrollTo(item)
        },
        move (even) {
          this.firstTouch = even.touches[0]
          this.touch.y2 = this.firstTouch.pageY;
          let anchorHeight = 16;
          let delta = (this.touch.y2 - this.touch.y1) / anchorHeight | 0;
          let anchor = this.shortcutList[this.shortcutList.indexOf(this.touch.anchor) + delta];

          this.scrollTo(anchor);
          even.preventDefault();
          even.stopPropagation();

        },
        scrollTo (anchor) {
          let maxScrollY = this.cityWrapper.clientHeight - this.cityScroller.clientHeight;
          let y = Math.min(0, Math.max(maxScrollY, this.anchorMap[anchor]));

          if (typeof y !== 'undefined') {
            this.scroll.scrollTo(0, y);
          }
        },
        initCity () {
          this.scroll = new BScroll(this.cityWrapper, {
            probeType: 3
          });

          this.scroll.on('scroll', function (pos) {
            console.log(Math.round(pos.y));
          });

          this.scroll.scrollTo(0, 0);
        },
        initShortCut () {
          let y = 0;
          let titleHeight = 28;
          let itemHeight = 44;
          let anchorMap = {}
          this.cityData.forEach((group)=> {
            let name = group.name.substr(0, 1);
            let len = group.cities.length;
            this.shortcutList.push(name);
            anchorMap[name] = y;
            y -= titleHeight + len * itemHeight;
          });
          this.anchorMap = anchorMap
        }
    }
}
</script>



<style>

  .city {
    display: block;
  }
  .city .city-wrapper {

    background:#fff;
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
  }
  .city .city-wrapper .cities .title {
    height: 28px;
    padding-left: 16px;
    line-height: 28px;
    background-color: #f5f5f5;
    font-size: .6rem;
    color: #878787;
  }
  .city .city-wrapper .cities .item {
    height: 44px;
    padding: 0 16px;
    line-height: 44px;
    font-size: .6rem;
  }
  .city .city-wrapper .cities .item .name {
    display: block;
    position: relative;
  }
  .city .city-wrapper .cities .item .name:before,
  .city .city-wrapper .cities .item .name:after {
    display: block;
    position: absolute;
    border-top: 1px solid #e5e5e5;
    left: 0;
    width: 100%;
    content: ' ';
  }
  .city .city-wrapper .cities .item .name:before {
    display: none;
    top: 0;
  }
  .city .city-wrapper .cities .item .name:after {
    display: block;
    bottom: 0;
  }
  .city .city-wrapper .cities .item:active {
    background-color: #f0f0f0;
  }
  .city .city-wrapper .cities .item:last-child .name:after {
    display: none;
  }
  .city .city-wrapper .shortcut {
    position: absolute;
    z-index: 30;
    width: 40px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .city .city-wrapper .shortcut .item {
    padding-top: 4px;
    padding-left: 24px;
    text-align: center;
    font-size: 13px;
    color: #fa8919;
    height:16px;
  }

</style>
